<style lang="scss" scoped>
	@import '@/assets/css/variable';

	.course {
		// position: absolute;
		// top: 0;
		// bottom: $tabbar-height;
		width: 100%;
		background-color: $bgw;
		min-height: 100%;
		font-size: 1.2rem;
		overflow-y: scroll;
		box-sizing: border-box;
		flex:1;
		background-color: $main-bgc-white;
		.scrollBox{
			margin-top: 2.6rem;
			padding: 0 0 0 1.6rem;
			background-color: $main-bgc-white;
			.scroll_x_view{
				overflow-x: scroll;
				display: flex;
				flex-direction: row;
				.item{
					word-break:keep-all;       /* 不换行 */
					white-space:nowrap;        /* 不换行 */
					width:28rem;
					display: flex;
					flex-direction: column;
					margin-right: 1.8rem;
					padding-bottom: 1rem;
					.imgBox{
						width:100%;
						height: 15.2rem;
						border-radius: 0.8rem;
						overflow: hidden;
					}
					.title{
						margin-top: 0.6rem;
						font-size: 1.5rem;
					}
					.desc{
						margin-top: 0.8rem;
						color:$color3;
						display: flex;
						align-items: center;
					}
				}
			}
		}
		.list {
			// padding-bottom: 1rem;
			background-color: $main-bgc-gray;
			.item {
				// margin-top: 0.4rem;
				// margin-left: 1rem;
				// margin-right: 1rem;
				padding: 0.8rem 1.6rem;
				background-color: white;
				.flex2 {
					display: flex;
					
					.flex2-left {
						flex: 0 0 90px;
						height: 70px;
						border-radius: 0.6rem;
						overflow: hidden;
						position: relative;
						.tag{
							background-color: #FE280B;
							padding: 0.3rem 0.7rem;
							border-bottom-left-radius: 0.8rem;
							color:white;
							position: absolute;
							right: 0;
							top: 0;
							border: 0.1rem solid white;
							.text{
								font-size: 10px;
								transform: scale(0.8); //缩放0.8倍
								color:white;
							}
						}
					}

					.flex2-right {
						margin-left: 0.8rem;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						
						.title {
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							/* 设置行数 */
							-webkit-box-orient: vertical;
							overflow: hidden;
							color: $color0;
							font-size: 1.6rem;
							line-height: 1.2em;
						}

						.desc {
							span {
								color: $color2;

								&.split {
									font-size: 1rem;
								}
							}
						}

						.badgeBox {
							padding-bottom: 0.4rem;
							margin-top: 0.6rem;

							.badge {
								padding: 0.1rem 0.8rem;
								font-size: 1.2rem;
								transform: scale(0.8);
								background-color: #E4EAFF;
								color: #4970FD;
								border: 0.1rem solid #4970FD;
								border-radius: 0.3rem;
								box-sizing: border-box;
								overflow: hidden;
							}
							.badge3 {
								padding: 0.1rem 0.8rem;
								font-size: 1.2rem;
								transform: scale(0.8);
								background-color: #E4EAFF;
								color: #4970FD;
								border: 0.1rem solid #4970FD;
								border-radius: 0.3rem;
								box-sizing: border-box;
								overflow: hidden;
							}
							.badge1 {
								padding: 0.1rem 0.8rem;
								font-size: 1.2rem;
								transform: scale(0.8);
								background-color: #FFECDC;
								color: #FF7E16;
								border: 0.1rem solid #FF7E16;
								border-radius: 0.3rem;
								box-sizing: border-box;
								overflow: hidden;
							}
							.badge2 {
								padding: 0.2rem 1rem;
								font-size: 1.2rem;
								background-color: #E8E9E9;
								color: #999;
								border: 0.1rem solid #999;
								border-radius: 0.3rem;
								box-sizing: border-box;
								overflow: hidden;
							}
						}
					}
				}
			}
		}

		.labelBox {
			padding-top: 1.6rem;
			padding-left: 1.6rem;
			background-color: $main-bgc-white;
			.label {
				height: 3.2rem;
				line-height: 3.2rem;
				border-radius: 1.6rem;
				padding: 0.5rem 1.2rem;
				background-color: #f7f7f7;
				color: #666;
				font-size: 1.4rem;
				margin-right: 3rem;

				&.active {
					background-color: #C5E2FF;
					color: #3397FA;
				}
			}
		}
		
		.labelBox4xx {
			padding-left: 1.6rem;
			padding-bottom: 1.6rem;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			.label {
				margin-top: 1rem;
				height: 2.2rem;
				line-height: 2.2rem;
				padding: 0 1rem;
				border-radius: 1rem;
				background-color: #F1F6F9;
				color: $color2;
				font-size: 1.3rem;
				margin-right: 1rem;
				display: flex;
				align-items: center;
				&.active {
					background-color: #C5E2FF;
					color: #3397FA;
				}
				img{
					flex: 0 0 12px;
					// transform: scale(0.9);
				}
				span{
					font-size: 10px;
				}

			}
		}
		.scrollBox {
			.overtext {
				display: inline-block;
				overflow: hidden;
				text-overflow: ellipsis; //超出部分以省略号显示
				white-space: nowrap;
				width: 80%;
			}
		}
		.tabBox {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			box-sizing: border-box;
			border-bottom: 1px solid $bgColor;

			a {
				padding-top: 1.3rem;
				padding-bottom: 1.3rem;
				width: 100%;
				text-align: center;
				font-size: 1.4rem;
				box-sizing: border-box;
				border-bottom: 3px solid transparent;
				color: $color2;

				&.bottomBorder {
					border-bottom: 3px solid $mainColor;
					font-weight: bold;
					color: $mainColor;
				}
			}
		}
	}
	
	.tabpanel{
		background-color: $main-bgc-white;
	}
	.navbarwrap {
		position: fixed;
		top: 0;
		left:0;
		right:0;
		width:100%;
		z-index: 999;
		background-color: $main-bgc-white;
	}
</style>
<template>
	<div class="course">
		<search-box></search-box>
		<!-- <div class="tabBox">
			<a v-for="(item,index) in tabList" :key="item.id" :class="{'bottomBorder':active==item.id}"
			@click="onClickTabs(index)">{{item.name}}</a>
		</div> -->
		<van-tabs v-model="tabActive" @change="onClickTabs" line-width="100" title-active-color="#335FFC" color="#335FFC">
		  <van-tab title="全部" name="0">
			<div class="labelBox" id="list0">
				<span class="label" :class="{'active':activeLabel==0}" @click="onClickLabels(0)">热门</span>
				<span class="label" :class="{'active':activeLabel==1}" @click="onClickLabels(1)">最新</span>
			</div>
			<div v-if="(courseData.Hot&&courseData.Hot.length>0)||(courseData.news&&courseData.news.length>0)">
				<div class="list" v-if="activeLabel==0">
					<div class="item" v-for="item in courseData.Hot" :key="item.id" @click="toDetailView(item)">
						<div class="flex2">
							<div class="flex2-left">
								<van-image width="90" height="70" fit="cover" :src="item.images"/>
								<div class="tag" v-if="item.type==2">
									<span class="text">线下课</span>
								</div>
							</div>
							<div class="flex2-right">
								<div class="title">{{item.name}}</div>
								<div class="desc">
									<span>共{{item.course_duration}}课时</span>
									<span class="split margL-l">|</span>
									<span class="margL-l">{{item.visit}}次浏览</span></div>
								<div class="badgeBox" v-if="item.type==1"><span class="badge">{{(item.sortname)}}</span></div>
								<div class="badgeBox" v-if="item.type==2">
									<span :class="$utils.getStatusBadge(item.start)">{{$utils.filterCourseStatus(item.start)}}</span>
								</div>
								
							</div>
						</div>
					</div>
				</div>
				<div class="list" v-if="activeLabel==1">
					<div class="item" v-for="item in courseData.news" :key="item.id" @click="toDetailView(item)">
						<div class="flex2">
							<div class="flex2-left">
								<van-image width="90" height="70" fit="cover" :src="item.images"/>
								<div class="tag" v-if="item.type==2">
									<span class="text">线下课</span>
								</div>
							</div>
							<div class="flex2-right">
								<div class="title">{{item.name}}</div>
								<div class="desc"><span>共{{item.course_duration}}课时</span><span class="split margL-l">|</span><span
										class="margL-l">{{item.visit}}次浏览</span></div>
								<div class="badgeBox" v-if="item.type==1"><span class="badge">{{(item.sortname)}}</span></div>
								<div class="badgeBox" v-if="item.type==2">
									<span :class="$utils.getStatusBadge(item.start)">{{$utils.filterCourseStatus(item.start)}}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div v-else>
				<van-empty description="暂无数据" />
			</div>
			<div class="splitLine"></div>
			<title-more title="线下课程" :tag="type2"></title-more>
			<div class="list margT-l" v-if="courseData.typeTwo&&courseData.typeTwo.length>0">
				<div class="item" v-for="item in courseData.typeTwo" :key="item.id" @click="toDetailView(item)">
					<div class="flex2 margT-l">
						<div class="flex2-left">
							<van-image width="90" height="70" fit="cover" :src="item.images" />
						</div>
						<div class="flex2-right">
							<div class="title">{{item.name}}</div>
							<div class="desc">
								<span>{{item.teacher&&item.teacher.name||'未设置教师'}}</span>
								<span class="split margL-l">|</span>
								<span class="margL-l">共{{item.course_duration}}课时</span>
							</div>
							<div class="badgeBox">
								<span :class="$utils.getStatusBadge(item.start)">{{$utils.filterCourseStatus(item.start)}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div v-else>
				<van-empty description="暂无数据" />
			</div>
			<div class="splitLine"></div>
			<title-more title="在线学习" :tag="type1"></title-more>
			<div class="list margT-l" v-if="courseData.typeOne&&courseData.typeOne.length>0">
				<div class="item" v-for="item in courseData.typeOne" :key="item.id" @click="toDetailView(item)">
					<div class="flex2 margT-l">
						<div class="flex2-left">
							<van-image width="90" height="70" fit="cover" :src="item.images" />
							<div class="tag" v-if="item.type==2">
								<span class="text">线下课</span>
							</div>
						</div>
						<div class="flex2-right">
							<div class="title">{{item.name}}</div>
							<div class="desc">
								<span>{{item.teacher&&item.teacher.name||'未设置教师'}}</span>
								<span class="split margL-l">|</span>
								<span class="margL-l">{{item.university}}</span></div>
								<div class="badgeBox"><span class="badge">{{item.sortname}}</span></div>
						</div>
					</div>
				</div>
			</div>
			<div v-else>
				<van-empty description="暂无数据" />
			</div>
		  </van-tab>
		  
		  <van-tab title="线下课程" name="1">
			<div class="labelBox4xx">
				<span class="label" :class="{'active':activeLabel4xx===index}"
				v-for="(item,index) in labelList4xx" @click="toView(`/course/courseList?tag=2&index4label=${index}&labelId=${item.id}`)" :key="item.id">{{item.name}}</span>
				<span class="label active">
					<img src="../../assets/img/select_all_icon.svg" alt="">
					<span style="margin-left: 0.6rem;font-size:1.3rem">全部</span>
				</span>
			</div>
			<div v-if="courseData1.Hot&&courseData1.Hot.length>0">
				<div class="titleMoreBox">
					<span class="title">热门课程</span>
				</div>
				<div class="scrollBox">
					<div class="scroll_x_view">
						<div class="item" v-for="item in courseData1.Hot" :key="item.id" @click="toDetailView(item)">
							<div class="imgBox">
								<van-image width="28rem" height="15.2rem" fit="cover" :src="item.images" />
							</div>
							<div class="title">{{item.sortname}}</div>
							<div class="desc">
								<span>{{item.teacher&&item.teacher.name||'未设置教师'}}</span>
								<span class="split margL-l">|</span>
								<span class="margL-l">{{item.visit}}次浏览</span></div>
						</div>
					</div>
				</div>
			</div>
			<div>
				<div class="splitLine"></div>
				<div class="titleMoreBox" @click="toView('/course/courseList?tag=2')">
					<span class="title">精选课程</span>
					<span class="more"><span>更多</span>
						<van-icon name="arrow" class="icon" color="#BFC0C2" size="1.6rem" />
					</span>
				</div>
				<div class="list margT-l" v-if="courseData1.news&&courseData1.news.length>0">
					<div class="item" v-for="item in courseData1.news" :key="item.id" @click="toDetailView(item)">
						<div class="flex2 margT-l">
							<div class="flex2-left">
								<van-image width="90" height="70" fit="cover" :src="item.images" />
								<div class="tag" v-if="item.type==2">
									<span class="text">线下课</span>
								</div>
							</div>
							<div class="flex2-right">
								<div class="title">{{item.name}}</div>
								<div class="desc">
									<span>{{item.teacher&&item.teacher.name||'未设置教师'}}</span>
									<span class="split margL-l">|</span>
									<span class="margL-l">共{{item.course_duration}}课时</span>
								</div>
								<div class="badgeBox" v-if="item.type==2">
									<span :class="$utils.getStatusBadge(item.start)">{{$utils.filterCourseStatus(item.start)}}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div v-else>
					<van-empty description="暂无数据" />
				</div>
			</div>
			<div v-if="courseData1.typeone&&courseData1.typeone.length>0">
				<div class="splitLine"></div>
				<title-more :title="courseData1.typeone&&courseData1.typeone[0].sortname" :tag="type2"></title-more>
				<div class="scrollBox">
					<div class="scroll_x_view">
						<div class="item" v-for="item in courseData1.typeone" :key="item.id" @click="toDetailView(item)">
							<div class="imgBox">
								<van-image width="28rem" height="15.2rem" fit="cover" :src="item.images" />
							</div>
							<div class="title">{{item.name}}</div>
							<div class="desc">
								<span>{{item.teacher&&item.teacher.name||'未设置教师'}}</span>
								<span class="split margL-l">|</span>
								<span class="margL-l">{{item.visit}}次浏览</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div v-if="courseData1.typetwo&&courseData1.typetwo.length>0">
				<div class="splitLine"></div>
				<title-more :title="courseData1.typetwo&&courseData1.typetwo[0].sortname" :tag="type2"></title-more>
				<div class="list margT-l">
					<div class="item" v-for="item in courseData1.typetwo" :key="item.id" @click="toDetailView(item)">
						<div class="flex2 margT-l">
							<div class="flex2-left">
								<van-image width="90" height="70" fit="cover" :src="item.images" />
							</div>
							<div class="flex2-right">
								<div class="title">{{item.name}}</div>
								<div class="desc">
									<span>{{item.teacher&&item.teacher.name||'未设置教师'}}</span>
									<span class="split margL-l">|</span>
									<span class="margL-l">共{{item.course_duration}}课时</span>
								</div>
								<div class="badgeBox" v-if="item.type==2">
									<span :class="$utils.getStatusBadge(item.start)">{{$utils.filterCourseStatus(item.start)}}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		  </van-tab>
		  
		  <!-- 在线学习 -->
		  <van-tab title="在线学习" name="2">
			<div class="labelBox4xx">
				<span class="label" :class="{'active':activeLabel4xx===index}"
				v-for="(item,index) in labelList4zx" @click="toView(`/course/courseList?tag=1&index4label=${index}&labelId=${item.id}`)" :key="item.id">{{item.name}}</span>
				<span class="label active">
					<img src="../../assets/img/select_all_icon.svg" alt="">
					<span style="margin-left: 0.6rem;font-size:1.3rem">全部</span>
				</span>
			</div>
			<div>
				<div class="titleMoreBox">
					<span class="title">热门课程</span>
				</div>
				<div class="scrollBox" v-if="courseData2.Hot&&courseData2.Hot.length>0">
					<div class="scroll_x_view">
						<div class="item" v-for="item in courseData2.Hot" :key="item.id"  @click="toDetailView(item)">
							<div class="imgBox">
								<van-image width="28rem" height="15.2rem" fit="cover" :src="item.images" />
							</div>
							<div class="title">{{item.name}}</div>
							<div class="desc">
								<span>{{item.teacher&&item.teacher.name||'未设置教师'}}</span>
								<span class="split margL-l">|</span>
								<span class="margL-l overtext">{{item.university}}</span>
							</div>
						</div>
					</div>
				</div>
				<div v-else>
					<van-empty description="暂无数据" />
				</div>
			</div>
			<div>
				<div class="splitLine"></div>
				<title-more title="精选课程" :tag="type1"></title-more>
				<div class="list margT-l" v-if="courseData2.news&&courseData2.news.length>0">
					<div class="item" v-for="item in courseData2.news" :key="item.id" @click="toDetailView(item)">
						<div class="flex2 margT-l">
							<div class="flex2-left">
								<van-image width="90" height="70" fit="cover" :src="item.images" />
								
							</div>
							<div class="flex2-right">
								<div class="title">{{item.name}}</div>
								<div class="desc">
									<span>{{item.teacher&&item.teacher.name||'未设置教师'}}</span>
									<span class="split margL-l">|</span>
									<span class="margL-l">{{item.university}}</span>
								</div>
								<div class="badgeBox"><span class="badge">{{$utils.filterCourseType(item.type)}}</span></div>
							</div>
						</div>
					</div>
				</div>
				<div v-else>
					<van-empty description="暂无数据" />
				</div>
			</div>
			<div v-if="courseData2.typeone&&courseData2.typeone.length>0">
				<div class="splitLine"></div>
				<title-more :title="courseData2.typeone&&courseData2.typeone[0].sortname" :tag="type1"></title-more>
				<div class="scrollBox">
					<div class="scroll_x_view">
						<div class="item" v-for="item in courseData2.typeone" :key="item.id"  @click="toDetailView(item)">
							<div class="imgBox">
								<van-image width="28rem" height="15.2rem" fit="cover" :src="item.images" />
							</div>
							<div class="title">{{item.name}}</div>
							<div class="desc">
								<span>{{item.teacher&&item.teacher.name||'未设置教师'}}</span>
								<span class="split margL-l">|</span>
								<span class="margL-l">{{item.university}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div v-if="courseData2.typetwo&&courseData2.typetwo.length>0">
				<div class="splitLine"></div>
				<title-more :title="courseData2.typetwo&&courseData2.typetwo[0].sortname"  :tag="type1"></title-more>
				<div class="list margT-l">
					<div class="item" v-for="item in courseData2.typetwo" :key="item.id" @click="toDetailView(item)">
						<div class="flex2 margT-l">
							<div class="flex2-left">
								<van-image width="90" height="70" fit="cover" :src="item.images" />
							</div>
							<div class="flex2-right">
								<div class="title">{{item.name}}</div>
								<div class="desc">
									<span>{{item.teacher&&item.teacher.name||'未设置教师'}}</span>
									<span class="split margL-l">|</span>
									<span class="margL-l">{{item.university}}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		  </van-tab>
		</van-tabs>
		<div v-if="courseData">
			<div class="splitLine"></div>
			<div class="splitLine"></div>
			<div class="tabbar-height"></div>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import SearchBox from '@/components/SearchBox.vue'
	import TitleMore from '@/components/TitleMore.vue'
	import {
		myMixins
	} from "@/assets/js/mixins.js"
	export default {
		name: "course",
		mixins: [myMixins],
		components: {
			SearchBox,TitleMore
		},
		// watch:{
		// 	tabActive(newVal) {
		// 		console.log("newVal",newVal)
		// 	}
		// },
		data() {
			return {
				type1:1,
				type2:2,
				activeLabel: 0,
				activeLabel4xx: '',
				active: 1,
				loadingRefresh: false,
				mainColor: "#FF0000",
				tabActive: 0,
				tabList: [{
					id: 0,
					name: "全部",
				}, {
					id: 1,
					name: "线下课程"
				}, {
					id: 2,
					name: "在线学习"
				}],
				labelList4xx: [],
				labelList4zx: [],
				courseData: '',
				courseData1:'',
				courseData2:'',
				loading: false,
				finished: false,
				pageNo: 1,
				pageSize: 10,
				selectedCampus:''
			}
		},
		created() {
			const _this = this;
			const selectedCampus = JSON.parse(localStorage.getItem('selectedCampus'))
			this.selectedCampus = selectedCampus
			this.CourseH5Hot()
		},
		mounted() {
			// document.title = '活动管理'
			// this.courseData = this.$store.state.courseData
			
			// var arr = document.getElementsByClassName("tabBox");
			// window.onscroll = function() {
			// 	//为了保证兼容性，这里取两个值，哪个有值取哪一个
			// 	//scrollTop就是触发滚轮事件时滚轮的高度
			// 	var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			// 	if (scrollTop > 120) {
			// 		arr[0].classList.add("navbarwrap");
			// 	} else {
			// 		arr[0].classList.remove("navbarwrap");
			// 	}
			// }
		},
		// destroyed() {
		// 	var arr = document.getElementsByClassName("tabBox");
		// 	window.onscroll = function() {}
		// },
		methods: {
			onClickLabels(index) {
				this.activeLabel = index
				console.log("onClickLabels", index)
			},
			onClickLabels4xx(index) {
				this.activeLabel4xx = index
				console.log("onClickLabels", index)
			},
			// scrollToPosition(id) {
			// 	const smooth_top = document.getElementById(id).offsetTop - 44*2
			// 	console.log('smooth_top:' + smooth_top)
			// 	try{
			// 		window.scrollTo({top: smooth_top, behavior: "smooth"});
			// 		this.navBarFixed = true
			// 	}catch(e){
			// 		window.scrollTo(0, smooth_top);
			// 		this.navBarFixed = true
			// 	}
			// },
			onClickTabs(index) {
				console.log("onClickTabs", index)
				this.active = index
				if (index == 0) {
					//全部
					this.CourseH5Hot()
				} else if (index == 1) {
					//线下课程
					this.CourseH5News()
					this.CoursesortH5Pages(2)
				} else if (index == 2) {
					//在线学习
					this.CourseH5Type1()
					this.CoursesortH5Pages(1)
				}
			},
			CoursesortH5Pages(type){
				const _this = this;
				let params = {
					type: type,
					pageNo:1,
					pageSize:50
				}
				_this.$request.CoursesortH5Pages(params).then(res => {
					if(type==1){
						this.labelList4zx = res.data.data
					}else{
						this.labelList4xx = res.data.data
					}
					
				})
			},
			CourseH5Hot() {
				const _this = this;
				let params = {
					campus_id: this.selectedCampus.id
				}
				_this.$request.CourseH5Hot(params).then(res => {
					let data = res.data
					this.courseData = data
				})
			},
			CourseH5News() {
				const _this = this;
				let params = {
					campus_id: this.selectedCampus.id,
					type: 2
				}
				_this.$request.CourseH5News(params).then(res => {
					let data = res.data
					this.courseData1 = data
				})
			},
			CourseH5Type1() {
				const _this = this;
				let params = {
					campus_id: this.selectedCampus.id,
					type: 1
				}
				_this.$request.CourseH5News(params).then(res => {
					let data = res.data
					this.courseData2 = data
				})
			},
		}
	};
</script>
